<template>
    <div id="nav">
        <router-link to="/"><span class="fa fa-home bars"></span></router-link>
        <div class="msg-box">
            <div @click="changeSelect">
                <slot>{{oneHotel.name}}<span class="fa" :class="showSelect?'fa-angle-down':'fa-angle-up'" style="font-size:0.28rem;padding-top:0.1rem"></span></slot>
            </div>
        </div>
        <div class="city-list" ref="city">
            <div ref="citys">
                <span @click="queryOne(h._id)" v-for="h in hotels" class="city-item">
                {{h.name}}
                </span>
            </div>
            
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data:function(){
            return{
                showSelect:true,
                cityHeight:'',
            }
        },
        computed: {
            ...mapState([
                "isShowMenu",
                "oneHotel",
                "hotels"
            ])
        },
        methods: {
            queryOne: function (_id) {
                this.$refs.city.style.height=0;
                var params = { _id:_id }
                this.$store.dispatch("queryOneHotel", params)
                    .then(res => {
                        this.$store.commit("setOneHotel", res.data.data);
                    });
            },
            changeSelect:function(){
                this.showSelect=!this.showSelect;
                if(this.showSelect){
                    this.$refs.city.style.height=0;
                }else{
                    this.$refs.city.style.height=this.$refs.citys.clientHeight+"px";
                }
                 
            }
        },
        mounted: function () {
            this.$refs.city.style.height=this.$refs.citys.clientHeight+"px";
        }
    }

</script>

<style scoped>
    #nav {

        height: 0.54rem;
        font-size: 0.2rem;
        background-color: #1996f9;
        line-height: 0.54rem;
        text-align: left;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: 0.1rem;
        z-index: 750;
        border-bottom: solid 1px #f1f1f1;
        align-items: center;
        color: white;
    }

    .msg-box {
        width: 60%;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        line-height: 0.54rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .bars {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 0.1rem;
        color: white;
        font-size: 0.2rem;
    }

    .city-list {
        position: absolute;
        top: 0.53rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0,0,0,0.7);
        transition: all 0.6s;
        overflow: hidden;
    }

    .city-item {
        text-decoration: none;
        padding: 0 0.1rem;
        font-size: 0.18rem;
        display: block;
        text-align: center;
        border-bottom: 1px solid #999;
        color: white;
    }
</style>